<template>
  <div>
    <div class="bottom_nav flex_between">
      <div class="logo">
        <img src="@/static/big-logo.svg" class="img" alt="SavingTik" />
      </div>
      <div class="nav_list flex_">
        <div class="item">
          <div class="item_title">{{ currentObj.Company }}</div>
          <nuxt-link to="/contact">
            <div class="item_text shou">{{ currentObj.contact }}</div>
          </nuxt-link>
          <nuxt-link to="/blog">
            <div class="item_text shou">blog</div>
          </nuxt-link>
        </div>
        <div class="item">
          <div class="item_title shou">{{ currentObj.Legal }}</div>
          <nuxt-link to="/terms-of-use">
            <div class="item_text">{{ currentObj.Termsofuse }}</div>
          </nuxt-link>
          <nuxt-link to="/privacy-policy">
            <div class="item_text">{{ currentObj.PrivacyPolicy }}</div>
          </nuxt-link>
        </div>
        <div class="item">
          <div class="item_title">{{ currentObj.Tools }}</div>
          <!-- <div @click="goToTools('video')" class="item_text shou">
            {{ currentObj.TikTokDownloader }}
          </div>
          <div @click="goToTools('mp3')" class="item_text shou">
            {{ currentObj.DownloadTikTokMP3 }}
          </div>
          <div @click="goToTools('story')" class="item_text shou">
            {{ currentObj.DownloadTikTokStory }}
          </div> -->
          <nuxt-link to="/save-tiktok-videos-without-posting">
            <div class="item_text shou">
              How to save tiktok videos without posting
            </div>
          </nuxt-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations } from "vuex";
import { handleClick } from "@/plugins/Firebase.js";
import dataList from "@/static/tools.js";

export default {
  computed: {
    ...mapGetters(["language"]),
    current() {
      return this.list1.findIndex((x) => x == this.language);
    },
    path() {
      return this.$route.path;
    },
    currentObj() {
      return this.currentList[this.current];
    },
  },
  created() {
    // this.$router.push(this.language + "/");
  },
  mounted() {
    if (process.client) {
      if (!localStorage.getItem("language")) {
        localStorage.setItem("language", "en");
        this.setLanguageHandel("en");
      } else {
        this.setLanguageHandel(localStorage.getItem("language"));
      }
    }
  },
  data() {
    return {
      openBtn: false,
      list: [
        "English", // 英语
        "Bahasa Indonesia", // 印度尼西亚语
        "Tiếng Việt", // 越南语
        "Bahasa Malaysia", // 马来语
        "Basa Jawa", // 爪哇语
        "Čeština", // 捷克语
        "Español", // 西班牙语
        "Français", // 法语
        "German", // 德语
        "Italian", // 意大利语
        "Magyar", // 匈牙利语
        "Nederlands", // 荷兰语
        "Polish", // 波兰语
        "Português", // 葡萄牙语
        "Română", // 罗马尼亚语
        "Thailand", // 泰语
        "Turkish (Turkey)", // 土耳其语
        "Ελληνικά", // 希腊语
        "украї́нська мо́ва", // 乌克兰语
        "Русский", // 俄语
        "عَرَبِيّ", // 阿拉伯语
        "한국어", // 韩语
        "日本語", // 日语
      ],
      list1: [
        "en", // 英语
        "id", // 印度尼西亚语
        "vn", // 越南语
        "ms", // 马来语
        "jv", // 爪哇语
        "cs", // 捷克语
        "es", // 西班牙语
        "fr", // 法语
        "de", // 德语
        "it", // 意大利语
        "hu", // 匈牙利语
        "nl", // 荷兰语
        "pl", // 波兰语
        "pt", // 葡萄牙语
        "ro", // 罗马尼亚语
        "th", // 泰语
        "tr", // 土耳其语
        "el", // 希腊语
        "uk", // 乌克兰语
        "ru", // 俄语
        "ar", // 阿拉伯语
        "ko", // 韩语
        "ja", // 日语
      ],
      currentList: dataList.list,
    };
  },
  // props: {
  //   openBtn: {
  //     type: Boolean,
  //     required: false, // 这表明 "myProp" 属性是必需的
  //   },
  // },
  methods: {
    goToTools(type) {
      let url = "";
      switch (type) {
        case "video":
          url = "";
          break;
        case "mp3":
          url = "/download-tiktok-mp3";
          break;
        default:
          url = "/download-tiktok-story";
      }
      if (this.language !== "en") {
        url = `/${this.language}${url}`;
      } else if (this.language == "en" && type == "video") {
        url = `/`;
      }
      this.$router.replace(url);

      // 切换页面 action_page_switch
      handleClick("action_page_switch", {
        site: type,
        from: "tools",
      });
    },
    ...mapMutations(["setLanguage"]),
    setLanguageHandel(lang) {
      this.setLanguage(lang);
    },
    changeLanguage(item, k) {
      localStorage.setItem("language", this.list1[k]);
      this.setLanguage(this.list1[k]);
      if (this.list1[k] == "en") {
        this.$router.push("/");
      } else {
        this.$router.replace("/" + this.list1[k]);
      }
      this.openBtn = false;
    },
    changeOpenBtn() {
      this.openBtn = !this.openBtn;
    },
    close() {
      this.openBtn = false;
    },
    stop() {},
  },
};
</script>
<style lang="scss" scoped>
.bottom_nav {
  align-items: flex-start;
  .logo {
    transform: translate(-10px, -27px);
    width: 132px;
    height: 171px;
  }
  .nav_list {
    align-items: flex-start;
    .item {
      margin-left: 140px;
      width: 200px;

      .item_title {
        margin-bottom: 20px;
        font-size: 18px;
        font-family: Poppins-Bold, Poppins;
        font-weight: bold;
        color: #ffffff;
      }
      .item_text {
        margin-bottom: 20px;
        font-size: 14px;
        font-family: Poppins-Regular, Poppins;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.5);
      }
    }
  }
}
@media (min-width: 992px) {
    .container-tt {
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
    }

    .page_content .footer .bottom_nav .nav_list {
        align-items: flex-start;

        .item {
            margin-left: 100px;
            width: 160px;

            .item_title {
                margin-bottom: 20px;
                font-size: 18px;
                font-family: Poppins-Bold, Poppins;
                font-weight: bold;
            }

            .item_text {
                margin-bottom: 20px;
                font-size: 14px;
                font-family: Poppins-Regular, Poppins;
                font-weight: 400;
            }
        }
    }
}

@media (min-width: 1200px) {
    .container-tt {
        max-width: 1140px;
        margin-left: auto;
        margin-right: auto;
    }

    .nav_list {
        align-items: flex-start;

        .item {
            margin-left: 140px !important;
            width: 200px !important;

            .item_title {
                margin-bottom: 20px;
                font-size: 18px;
                font-family: Poppins-Bold, Poppins;
                font-weight: bold;
            }

            .item_text {
                margin-bottom: 20px;
                font-size: 14px;
                font-family: Poppins-Regular, Poppins;
                font-weight: 400;
            }
        }
    }
}
</style>